<template>
  <div class="home" ref="app">
    <div class="title-box">
      <!-- <img src="@/assets/home/title.png" alt="" srcset="" /> -->
      <PageTitle :src="'home/title2.png'">
          湘雅二院代谢内分泌科
      </PageTitle>
      <div class="button-box">
        <el-radio-group v-model="currPage" size="mini" @change="changePage">
          <el-radio-button :label="1">采集概况</el-radio-button>
          <el-radio-button :label="2">趋势分析</el-radio-button>
        </el-radio-group>
      </div>
      <div class="select-box">
        <el-select v-model="yearName" size="mini" placeholder="请选择年份" @change="changeYear">
          <el-option
            v-for="item in yearList"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </div>
    </div>
    <div class="bar-container">
      <div v-for="(item) in barOptions" :key="item.title" class="bottom-right-top box-border">
        <CommonTitle :px="styleUtil.px2vh(23)">
          <template #title>
            {{item.title}}
          </template>
        </CommonTitle>
        <div class="title-border"></div>
        <div class="bottom-left-content">
          <dv-charts
            :option="item.options"
            style="width: 100%; height: 240px"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PageTitle from '@/components/PageTitle';
import CommonTitle from '@/components/CommonTitle';
import {getStatistics, getYear} from '@/api/symptoms'
import { fitChartSize } from '@/utils/echartUtils.js';
import { ChangePageMixin } from '@/mixins/changePage';
import {cloneDeep} from 'lodash'
export default{
    components:{
        PageTitle,
        CommonTitle
    },
    mixins:[ChangePageMixin],
    data(){
        return{
          currPage:2,
          yearName:undefined,
          yearList:[
            {
              label:'2021',
              value:2021
            },
            {
              label:'2022',
              value:2022
            },
            {
              label:'2023',
              value:2023
            },
            {
              label:'2024',
              value:2024
            }
          ],
          option: {
            title: {
              show: false,
            },
            grid:{
              right:0
            },
            xAxis: {
              name: '',
              data: ['2018', '2019', '2020', '2021', '2022', '2023'],
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              nameTextStyle: {
                fill: '#3ab3ff',
                fontSize: fitChartSize(12),
              },
              axisLabel: {
                style: {
                  fill: '#3ab3ff',
                  fontSize: fitChartSize(12),
                  rotate: 0,
                },
              },
            },
            yAxis: {
              name: '单位：例',
              data: 'value',
              nameTextStyle: {
                fill: '#3ab3ff',
                fontSize: fitChartSize(12),
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                style: {
                  fill: '#3ab3ff',
                  fontSize: fitChartSize(12),
                  rotate: 0,
                },
              },
              splitLine: {
                style: {
                  stroke: '#173f6d',
                  lineWidth: 1,
                },
              },
            },
            series: [
              {
                data: [34733, 42599, 49244, 58902, 68627, 71529],
                type: 'bar',
                label: {
                  show: true,
                  formatter: '{value} ',
                  style: {
                    fontSize: fitChartSize(12),
                    fill: '#fff',
                  },
                },
                lineArea: {
                  show: true,
                  gradient: ['rgba(26, 48, 98, 1)', 'rgba(26, 48, 98, 0.3)'],
                },
                linePoint: {
                  radius: 4,
                },
              },
            ],
          },
          barOptions: []
        }
    },
    mounted(){
      
      this.getYears()
    },
    methods:{
      getStatisticsData(){
        const params={
          yearName:this.yearName
        }
        const _obj = {}
        this.barOptions =[]
        getStatistics(params).then(res=>{
          res.rows.forEach(item=>{
            if(Object.prototype.hasOwnProperty.call(_obj,item.symptomType)){
              _obj[item.symptomType].push({
                displayOrder:item.displayOrder,
                hospital:item.hospital,
                value:item.symptomCount,
                label:item.symptomName
              })
            }else{
              _obj[item.symptomType] = []
              _obj[item.symptomType].push({
                displayOrder:item.displayOrder,
                hospital:item.hospital,
                value:item.symptomCount,
                label:item.symptomName
              })
            }
          })
          
          for(let key in _obj) {
            const dataByLabel = this.groupByLabel(_obj[key])
            const options = cloneDeep(this.option)
            if(key === '非胰岛素用药方案' || key === '糖尿病并发症'){
              options.xAxis.axisLabel.style.rotate = -15
            }

            options.xAxis.data = []
            options.series = []
            options.legend= {
              top:15,
              textStyle:{
                fontSize: 13,
                fill: '#3ab3ff'
              },
              data: []
            }
            dataByLabel.forEach((item,index)=>{
              options.xAxis.data.push(item[0].label)
              console.log(index)
              if(index === 0){
                item.forEach(el=>{
                  options.series.push({
                    name:el.hospital,
                  ...this.option.series[0],
                  data: [el.value]
                  })
                  options.legend.data.push(el.hospital)
                })
              }else{
                item.forEach((el,index)=>{
                  options.series[index].data.push(el.value)
                })
              }

            })
            console.log(options)
            this.barOptions.push({
              title:key,
              options:{ ...options}
            })
            _obj[key]
          }
        }) 
      },
      groupByLabel(hospitals) {
        // 创建一个空对象，用来按照label分组
        const grouped = {};
        hospitals.sort((a,b)=>{
          return a.displayOrder - b.displayOrder
        })

        // 遍历数组，根据label将对象分配到相应的组
        hospitals.forEach(hospital => {
          // 如果该label下还没有数组，则初始化一个空数组
          if (!grouped[hospital.label]) {
            grouped[hospital.label] = [];
          }
          // 将当前医院对象添加到对应的label数组中
          grouped[hospital.label].push(hospital);
        });

        // 将对象转换为数组，并按照label排序（如果需要）
        return Object.keys(grouped).map(label => grouped[label]);
      },
      getYears(){
        getYear().then(res=>{
          this.yearList = res.rows
          const defaultYear =  res.rows.find(item=>item.default)
          if(defaultYear){
            this.yearName = defaultYear.dictValue
          }
          this.getStatisticsData()
        })
      },
      changeYear(){
        this.getStatisticsData()
      }
    }
}
</script>
<style lang="scss" scoped>
.font-18 {
  font-size: vh(18);
}
.home {
  // display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  .title-box {
    width: 100%;
    height: vh(100);
  }

  .bottom-right-top
    {
      border-radius: 10px;
      padding:0 vw(29);
      color: #fff;
      width: vw(551);
      height:vh(350);
      margin-bottom: vh(20);
      .bottom-left-content{
        height: vh(240);
      }
    }
  .select-box{
    position: absolute;
    top:vh(60);
    right:vw(60);
  }
}
.title-border {
  border-bottom: 2px solid #184576;
  margin-bottom: vh(10);
}
.bar-container{
  padding: 0 vw(30);
  display: flex;
  justify-content: space-around;
  flex-flow: row wrap; 
  gap: vw(30);
  height: calc(100% - vh(100));
  overflow-y: auto;
}
</style>